<template>
  <div>
      <list title="分类页"/>
      <div class="wrap">
        <div class="left">
          <div class="classify">
            <div :class="['cfy',{
              mon: index ===num
            }]"
            v-for="(i,index) in cates"
            :key="i.id"
            @click='switchCate(index)'
            >
            {{i.name}}
            </div>
          </div>
        </div>
        <div class="right">
                <van-card
                    v-for="i in items"
                    :key="i.id"
                    num="2"
                    :price="i.minPrice"
                    :title="i.name"
                    :thumb="i.pic"
                    >

                    <template #footer>
                        <van-button size="mini">按钮</van-button>
                        <van-button size="mini">按钮</van-button>
                    </template>
                </van-card>
        </div>
      </div>
      <My-Tabbar/>
  </div>
</template>

<script>
import MyTabbar from '@components/MyTabbar'
import list from '@views/Home/component/ItemListHead'
import { fetchCates, RequestList } from '@api'
export default {
  data () {
    return {
      num: 0, // 控制切换分类状态
      cates: [],
      items: []
    }
  },
  created () {
    this.fetchCates()
    this.requestList()
  },
  methods: {
    requestList () {
      RequestList({
        categoryId: this.$route.params.cateId,
        orderBy: this.orderBy
      }).then(res => {
        if (res.data.code === 0) {
          this.items = res.data.data
        //   console.log(this.items)
        }
      })
    },
    switchCate (index) {
      this.num = index
      this.requestList()
    },
    fetchCates () {
      // 请求所有分类
      fetchCates().then(res => {
        if (res.data.code === 0) {
          this.cates = res.data.data
          this.requestList()
        }
      })
    }
  },
  components: {
    MyTabbar,
    list
  }
}
</script>

<style lang="scss" scoped>
.wrap{
   position: fixed;
  left: 0;
  right: 0;
  top: 46px;
  bottom: 50px;
  background-color: rgb(246, 242, 242);
  display: flex;
  .left{
    width: 100px;
    height: 100%;
    border-right: 1px solid #666;
    height: 100%;
    .cfy{
      line-height: 40px;
      text-align: center;
      font-weight: 600;
      &.mon{
        color: darkblue;
        font-size: 20px;
      }
    }
  }
  .right{
    flex: 1;
    height: 100%;
    overflow: auto;
    background-color: yellow;
  }
  .shop{
    flex-wrap:wrap;
    display: flex;
    .sp{
    position: relative;
    display: block;
    width: 240px;
    margin: 5px 5px;
    height: 249px;
    text-align: center;
    border-radius: 25px;
    background-color: #fff;
    img{
        margin: 2px auto;
        width: 80%;
        height: 140px;
    }
    p{
        position: absolute;
        margin: 0 10px;
        bottom: 55px;
        text-align: left;
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    .icon--jia{
        margin-right: 25px;
        font-size: 25px;
    }
    .pv{
        align-items: center;
        font-size: 25px;
        color: red;
        display: flex;
        width: 170px;
        height: 50px;
        justify-content:space-around;
        position: absolute;
        bottom: 0;

    }}}
}

</style>
